<template>
	<view class="mine_page">
		<view class="u-flex u-flex-between u-flex-items-center p-top-80">
			<view class="u-flex u-flex-items-center">
				<block v-if="Object.keys(userInfo).length == 0">
					<up-avatar size="60"></up-avatar>
					<view @click="login" class="u-m-20">立即登录</view>
				</block>
				<block v-else>
					<view class="_avatar"><up-avatar :size="58" mode="aspectFill" :src="userInfo.avatar"
							@click="previewAvatar()"></up-avatar></view>
					<view class="u-m-l-20">
						<view class="u-flex u-flex-items-center">
							<view class="f-w-b f-s-16 u-m-r-12">{{ userInfo.nickName }}</view>
							<image src="@/static/imgs/vip2.png " style="width: 30px;height: 30px" v-if="userCard">
							</image>
						</view>
						<view class="sub_phone">{{ starPhone(userInfo.phonenumber)  }}</view>
					</view>
				</block>
			</view>
			<view class="edit_card u-flex u-flex-center u-flex-items-center" @click="goEditInfo">
				<view class="u-m-r-4 f-s-12">修改资料</view>
				<up-icon name="arrow-right" size="12" color="#fff"></up-icon>
			</view>
		</view>
	</view>
	<view class="content_">
		<view class="data_card" v-if="userInfo.role=='Coach'">
			<view class="f-s-14 u-m-b-26 f-w-b">我的数据</view>
			<u-grid :border="false" col="4" :labelDisabled="true">
				<u-grid-item custom-style="opacity:1" v-for="(coachListItem,coachListIndex) in coachList"
					:key="coachListIndex">
					<text class="f-s-20 f-w-b">{{coachListItem.name}}</text>
					<text class="sub-title-two f-s-12 u-m-t-2">{{coachListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view>
			<view class="u-flex u-flex-center" v-if="userInfo.role=='User'">
				<view class="invite_">
					<view class="u-flex u-flex-1 u-flex-between u-flex-items-center">
						<view class="u-flex u-flex-items-center">
							<image src="../static/mine/join.png" style="width: 58rpx;height:58rpx;"></image>
							<view class="f-s-12 white u-m-l-20">加入教练团队获取更多权益</view>
						</view>
						<view>
							<u-button color="linear-gradient( 178deg, #5CC4FF 0%, #3790FF 100%);" shape="circle"
								text="立即申请" size="small" @click="goToJoin" :customStyle="{ width: '70px' }"></u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="class_card" v-if="userInfo.role=='User'">
				<view class="u-flex u-flex-between u-flex-items-center">
					<view class="f-s-14 u-m-b-28 f-w-b">今日课程</view>
					<view class="u-flex u-flex-items-center" @click="goMyCourse">
						<view class="f-s-14 u-info">全部</view>
						<up-icon name="arrow-right" color="#909399"></up-icon>
					</view>
				</view>
				<view class="class_style" v-if="appointList.length>0">
					<block v-for="appoint in appointList" :key="appoint.id">
						<up-steps current="0" direction="column" inactiveColor="#3c9cff" dot>
							<up-steps-item>
								<template #desc>
									<view class="u-flex u-flex-between u-flex-items-center">
										<view>
											<view class="f-s-14">{{ appoint.courseCard?.name }}</view>
											<view class="f-s-12 u-m-t-12 u-info">
												{{appoint.startAt }}~{{ appoint.endAt}}
											</view>
										</view>
										<view class="f-s-12 c-info" v-if="appoint.status== 0">待确认</view>
										<view class="f-s-12 c-warning" v-if="appoint.status== 1">未签到</view>
										<view class="f-s-12 c-success" v-if="appoint.status== 2">已签到</view>
										<view class="f-s-12 c-error" v-if="appoint.status== -1">拒绝</view>
									</view>
								</template>
							</up-steps-item>
						</up-steps>
					</block>
				</view>
				<emptyData v-else text="暂无课程" paddingTop="0rpx"></emptyData>
			</view>
			<view class="class_card" v-if="userInfo.role=='Coach'">
				<view class="u-flex u-flex-between u-flex-items-center">
					<view class="f-s-14 u-m-b-28 f-w-b">今日课程</view>
					<view class="u-flex u-flex-items-center" @click="goCoachCourse">
						<view class="f-s-14 u-info">全部</view>
						<up-icon name="arrow-right" color="#909399"></up-icon>
					</view>
				</view>
				<view class="class_style" v-if="appointList.length>0">
					<block v-for="appoint in appointList" :key="appoint.id">
						<up-steps current="0" direction="column" inactiveColor="#3c9cff" dot>
							<up-steps-item>
								<template #desc>
									<view class="u-flex u-flex-between u-flex-items-center">
										<view>
											<view class="f-s-14">{{ appoint.courseCard?.name }}</view>
											<view class="f-s-12 u-m-t-12 u-info">
												{{ appoint.startAt }}~{{ appoint.endAt }}
											</view>
										</view>
										<view class="f-s-12 c-info" v-if="appoint.status== 0">待确认</view>
										<view class="f-s-12 c-warning" v-if="appoint.status== 1">未签到</view>
										<view class="f-s-12 c-success" v-if="appoint.status== 2">已签到</view>
										<view class="f-s-12 c-error" v-if="appoint.status== -1">拒绝</view>
									</view>
								</template>
							</up-steps-item>
						</up-steps>
					</block>
				</view>
				<emptyData v-else text="暂无课程" paddingTop="0rpx"></emptyData>
			</view>
			<view class="function_card">
				<view class="f-s-14 u-m-b-28 f-w-b">订单</view>
				<view class="content">
					<u-grid :border="false" col="4" @click="orderClick">
						<u-grid-item v-for="(item,index) in orderList" :key="index">
							<view class="u-m-b-36 u-flex u-flex-items-center u-flex-column">
								<image :src="'/static/imgs/'+ item.url" style="width: 34px" mode="widthFix">
								</image>
								<text class="icon_text">{{item.title}}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="function_card">
				<view class="f-s-14 u-m-b-28 f-w-b">特色服务</view>
				<view class="content">
					<u-grid :border="false" col="4" @click="featureClick">
						<u-grid-item v-for="(item,index) in featureList" :key="index">
							<view class="u-m-b-36 u-flex u-flex-items-center u-flex-column">
								<image :src="'/static/imgs/'+item.url" style="width: 34px" mode="widthFix">
								</image>
								<text class="icon_text">{{item.title}}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<view class="function_card">
			<view class="f-s-14 u-m-b-34 f-w-b">常用功能</view>
			<view class="content">
				<u-grid :border="false" col="4">
					<block v-for="(menu,index) in studyList" :key="index">
						<u-grid-item v-if="!menu.hide" @click="click(menu)">
							<view class="u-m-b-36 u-flex u-flex-column u-flex-items-center">
								<image :src="'/static/imgs/'+menu.url" style="width: 30px;height: 30px;"
									mode="widthFix">
								</image>
								<text class="icon_text">{{menu.title}}</text>
							</view>
						</u-grid-item>
					</block>
				</u-grid>
			</view>
		</view>
		<view class="login-out">
			<up-button :customStyle="{width:'320px',borderRadius:'6px'}" color="#bbb" @click="logOut"
				text="退出登录"></up-button>
			<view class="u-m-t-60 ">
				<text @click="toWeb(12)">关于我们</text>
				<text>&nbsp;&nbsp;|&nbsp;&nbsp;</text>
				<text @click="toWeb(11)">服务条款</text>
				<text>&nbsp;&nbsp;|&nbsp;&nbsp;</text>
				<text @click="toWeb(13)">隐私政策</text>
			</view>
		</view>
	</view>

</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import {
		isEmptyObject
	} from '../utils/common';
	import titleText from "@/components/title_text.vue"
	import emptyData from '@/components/EmptyData.vue'
	import store from '@/store'
	import {
		starPhone
	} from '@/utils/common';
	import {
		isPay
	} from '@/api/joinOrder.js'
	import {
		coachAppointList,
		mineAppointList
	} from '@/api/appoint.js'
	import {
		toast
	} from 'uview-plus';
	const userInfo = ref({})
	const userCard = ref({})
	const coach = ref({})
	const top = uni.getMenuButtonBoundingClientRect().top
	const lineHeight = uni.getMenuButtonBoundingClientRect().height
	const date = ref(uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'))
	const appointList = ref([])
	const orderList = ref([{
			name: '&#xe8bc;',
			url: 'kc.png',
			title: '课程订单',
			page: '/subPackages/order/courseOrder'
		},
		{
			url: 'Venue.png',
			name: '&#xe6cc;',
			title: '场馆订单',
			page: '/subPackages/order/venueOrder'
		},
		{
			url: 'shop.png',
			name: '&#xe63a;',
			title: '商品订单',
			page: '/subPackages/order/shopOrder'
		}
	])
	const featureList = ref([
		// {
		// 	name: '&#xe8bc;',
		// 	url: 'vip.png',
		// 	title: '储蓄会员',
		// 	page: '/subPackages/mine/saveVip'
		// },
		{
			url: 'zqvip.png',
			name: '&#xe6cc;',
			title: '会员开通',
			page: '/subPackages/mine/cycleVip'
		}
		// {
		// 	url: 'integral.png',
		// 	name: '&#xe63a;',
		// 	title: '积分兑换',
		// 	page: '/subPackages/mine/integral'
		// },
		// {
		// 	url: 'coupon.png',
		// 	name: '&#xe63a;',
		// 	title: '优惠券',
		// 	page: '/subPackages/mine/coupon'
		// }
	])
	const coachList = ref([{
			name: '0',
			title: '课程量',
		},
		{
			name: '0',
			title: '学员量'
		}, {
			name: '0',
			title: '热度'
		}, {
			name: '0',
			title: '粉丝数'
		}
	])
	const studyList = ref([{
			name: '&#xe615;',
			url: 'ppq.png',
			title: '我的课程',
			page: '/subPackages/course/my_payCousrse',
			hide: false,
		},
		{
			name: '&#xe615;',
			url: 'ppq.png',
			title: '课程',
			page: '/subPackages/course/courseList',
			hide: true,
		},
		{
			name: '&#xe604;',
			url: 'student.png',
			title: '我的学员',
			page: '/subPackages/mine/my_student',
			hide: true,
		},
		{
			name: '&#xe8be;',
			url: 'yuding.png',
			title: '我的预订',
			page: '/subPackages/mine/reservation',
		},
		{
			name: '&#xe8be;',
			url: 'gz.png',
			title: '我的关注',
			page: '/subPackages/mine/follow',
		},
		{
			name: '&#xe717;',
			url: 'zx.png',
			title: '联系我们',
			page: '/subPackages/mine/customer',
			hide: false
		},
		{
			name: '&#xe604;',
			url: 'mp.png',
			title: '教练资料',
			page: '/subPackages/mine/coachInfo',
			hide: true,
		},
		{
			name: '&#xe604;',
			url: 'qd.png',
			title: '学员签到',
			page: '/subPackages/mine/sign',
			hide: true,
		},
		{
			name: '&#xe604;',
			url: 'dz.png',
			title: '地址管理',
			page: '/subPackages/mine/address',
			hide: false
		},
		{
			url: 'fankui.png',
			title: '意见反馈',
			page: '/subPackages/mine/feedback',
			hide: false
		},
		
	])
	onShow(() => {
		userCard.value = store.getters.userCard
		// 获取用户信息
		store.dispatch('GetInfo').then((resp) => {
			userInfo.value = resp.user
			coach.value = resp.coach
			if (!isEmptyObject(coach.value)) {
				coachList.value[0].name = coach.value.courseNum
				coachList.value[1].name = coach.value.studentNum
				coachList.value[2].name = coach.value.hot
				coachList.value[3].name = coach.value.fans
				studyList.value[0].hide = true
				studyList.value[1].hide = false
				studyList.value[2].hide = false
				studyList.value[3].hide = false
				studyList.value[4].hide = false
				studyList.value[5].hide = false
				
				getAppointList(coach.value.id, date.value)
				return
			}
			getUserAppointList(date.value)
		})
	})
	//加入团队
	function goToJoin() {
		isPay().then(resp => {
			if (resp.data) {
				uni.navigateTo({
					url: '/subPackages/mine/joinInfo'
				})
				return;
			}
			uni.navigateTo({
				url: '/subPackages/mine/join'
			})
		})
	}
	/**
	 * 教练今日课程
	 */
	function getAppointList(coachId, date) {
		coachAppointList(coachId, date).then(res => {
			appointList.value = res.data
		})
	}
	/**
	 * 学员今日课程
	 */
	function getUserAppointList(date) {
		mineAppointList(date).then(res => {
			appointList.value = res.data
		})
	}
	//退出登录
	function logOut() {
		store.dispatch('LogOut').then(resp => {
			uni.showToast({
				title: '退出成功',
				icon: 'success',
				duration: 2000
			})
			uni.reLaunch({
				url: '/pages/index'
			})
		})
	}
	/**
	 *我的课程
	 *
	 */
	function goMyCourse() {
		uni.navigateTo({
			url: '/subPackages/course/my_course'
		})
	}
	/**
	 *教练的课程
	 *
	 */
	function goCoachCourse() {
		uni.navigateTo({
			url: '/subPackages/course/coach_course'
		})
	}

	//登录
	function login() {
		uni.navigateTo({
			url: '/pages/authLogin'
		})
	}

	function toWeb(id) {
		uni.navigateTo({
			url: '/subPackages/about/about?id=' + id
		})
	}
	/**预览头像
	 * @param {Object} 
	 */
	function previewAvatar() {
		if (!userInfo.value.avatar) {
			return
		}
		uni.previewImage({
			urls: [userInfo.value.avatar]
		});
	}

	function click(e) {

		if (!e.page) {
			return
		}
		uni.navigateTo({
			url: e.page
		})
	}

	function orderClick(e) {
		const page = orderList.value[e]?.page
		const click = orderList.value[e]?.click
		if (!page) {
			return
		}
		uni.navigateTo({
			url: page
		})
	}

	function featureClick(e) {
		const page = featureList.value[e]?.page
		const click = featureList.value[e]?.click
		if (!page) {
			return
		}
		uni.navigateTo({
			url: page
		})
	}

	function goEditInfo() {
		uni.navigateTo({
			url: '/subPackages/mine/set'
		})
	}
	onShareAppMessage(() => {
		return {
			title: '友德宝-个人中心',
		}
	})
	onShareTimeline(() => {
		return {
			title: '友德宝-个人中心',
		}
	})
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5 !important;
	}

	.mine_page {
		padding: 12px 12px 20px;
		background-image: url(https://images.debaoppq.cn/274b737ae3e54b5dafcab860ee1b05ef.png);
		background-size: cover;
		background-position: center center; // 设置背景图片位置为居中
		height: 240px;
		position: relative;

		._avatar {
			width: 58px;
			height: 58px;
			border: 2px solid #fff;
			border-radius: 50%;
		}

		.edit_card {
			padding: 6px 8px;
			background: #2080F7;
			border-radius: 180rpx 180rpx 180rpx 180rpx;
			color: #FFFFFF;
		}

	}

	.content_ {
		width: 100%;
		position: absolute;
		top: 180px;

		.invite_ {
			background-image: url(https://images.debaoppq.cn/5393f9d84db141a090c9e5128febfdef.png);
			width: 622rpx;
			height: 90rpx;
			box-sizing: border-box;
			background-size: cover; // 设置背景图片大小为全图
			background-repeat: no-repeat; // 设置背景图片不重复
			background-position: center center; // 设置背景图片位置为居中
			display: flex; // 设置为flex布局，使子元素可以水平垂直居中
			align-items: center; // 设置子元素垂直居中
			justify-content: center; // 设置子元素水平居中
			font-size: 16px; // 设置文字大小，根据需要调整
			padding: 0 32rpx;
		}

		.data_card {
			margin: 0 12px 10px 12px;
			background-color: #fff;
			border-radius: 12px;
			padding: 8px 16px 24px 16px;
		}

		.function_card {
			margin: 0 12px 10px 12px;
			background-color: #fff;
			box-shadow: 4rpx 8rpx 8rpx 0rpx rgba(155, 155, 155, 0.02);
			border-radius: 12px;
			padding: 8px 16px 8px 16px;

			.content {
				border-radius: 8px;

				.icon_colour {
					font-size: 36px;
					color: #0099ff;
				}

				.icon_text {
					font-size: 12px;
					color: #666666;
					line-height: 14px;
					margin-top: 4rpx;
				}
			}
		}

		.class_card {
			margin: 0 12px 10px 12px;
			background-color: #fff;
			box-shadow: 4rpx 8rpx 8rpx 0rpx rgba(155, 155, 155, 0.02);
			border-radius: 12px;
			padding: 8px 16px 8px 16px;

			.class_style {
				//设置高度，超出高度可滚动
				height: 80px;
				overflow-y: scroll;
			}
		}

		.login-out {
			position: absolute;
			padding: 20px 0;
			left: 50%;
			transform: translateX(-50%); // 水平居中对齐
			text-align: center;
			color: #999;
			font-size: 12px;
		}
	}

	.popup {
		width: 560rpx;
		box-sizing: border-box;
		padding: 28rpx 70rpx 48rpx;

		.select_btn {
			margin-top: 24rpx;
			width: 420rpx;
			height: 72rpx;
			background: #F4F4F4;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			line-height: 72rpx;
			color: #666666;
			font-size: 14px;
		}

		.active {
			background: #2080F7;
			color: #FFFFFF;
		}
	}
</style>